Frame Syntax for FrameWork

Frame Syntax

About this page:

This page is a simlified description of frame synax for Framework 1.0 users. It only gives a breif description of frames and targets, and doesn't go into the layout aspects of frames since Framework takes care of the layout of a page for you.

Elements of a page with Frames:

A page with frames has a few simple elements, <FRAMESET> tags, <FRAME> tags, and <NOFRAME> tags. Pretty simple, right? Well, it's not that easy. Each tag has specific elements that can affect the layout and behavior of the page. Below is the complete html code for a very simple frame page:

	<html>	<head>	<title>Simple Frame Page</title>	</head>	
	<frameset cols="30%, *" frameborder="no">	<frame 
		src="left_side.html"
		name="left"
		scrolling="auto"
		marginwidth="20" 	
		noresize>	<frame
		src="right_side.html"
		name="right">	</frameset>	
	<noframes>
	<!-- Some browsers do not support frames. -->	<!-- Please put source for these browsers to view here. -->	
	</noframes>

Now, this page would create a page with two frames on it. Understanding what the frame and frameset tags do is not needed. Nor is it important that you even know how this page would be layed out. In fact, if you're using framework to design your html pages, there are only 3 things on this page that you should understand. The first is that every frame has a src (or source) attribute. This attribute tells your web browser where to find the html document that belongs in that specific frame. In this case, we have two source files, left_side.html and right_side.html. The source can also be a full url, for example "http://www.somepage.com/". When you are setting up your html pages in framework, it's important that you define a source for every frame that you create.

The second feature that's important on this page is the fact that every frame should have a name attribute if you plan to have links on your page which load into that frame. Names should be distinct. I also like to choose names that are reprentative of the frame. In this case, I chose "left" and "right" because one frame is on the left and one is on the right. I'll come back to why naming each of your frames is nessasary later in this document.

The last feature that you should be familar with on this page is the "noframes" option. This section is provided so that you can give browsers that don't support frames an alternate html page

Elements of the <frame> tag

Element	Option	Dexcription
Scrolling	Yes	Gives the frame scroll bars regaurdless of the data inside the frame
	No	The frame will never have scroll bars.
	Auto	The browser decides if this frame will have scroll bars based upon the data inside of the frame and the size of the frame.
Resize	resize	This frame can be resized by the user
Resize	noresize	This frame can't be resized by the user
Src	string	This is the url to the html file that belongs inside the frame
Name	string	The name attribute isn't required, but is needed if you plan to have any links that you want to target to this frame.
Marginwidth	integer	The marginwidth is used to determine the minimum number of pixels from the right and left sides of the frame that that text can go to. It's useful if you have some text that you would like to be away from the sides of the frame
Marginheight	integer	The marginheight is used to determine the minimum number of pixels from the top and bottom of the frame that that text can go to. It's useful if you have some text that you would like to be away from the top and bottom of the frame

Targets and Frames

Earlier we stated that it's important to give every frame a distinct name if you wish to have links load into that window. This is called targeting and is the thing most people who are just learning frames have trouble with. If we go back to our sample frame page, we see that we gave the left frame a source: left_side.html. That file might look something like this:

<html><head></head><body bgcolor="white"><a href="http://www.yahoo.com">Yahoo</a><br><a href="http://www.yahoo.com" target="right">Right minded Yahoo</a><br><a href="http://www.yahoo.com" target="_top">A Fresh look at Yahoo</a><br><a href="http://www.yahoo.com" target="_new">Yahoo to a new window</a><br><a href="http://www.yahoo.com" target="_self">Self-centered Yahoo</a><br></body></html>

This frame just has a few links to Yahoo, but each link will behave differently because each one is targeted in a special manner. Since we gave the right frame the name "right", the second link will load into that frame. All the other links demonstrate the use of special targets. These targets can always be used for links and are defined as follows:

_top: Load this link into the same window as the frame I'm located in, but get rid of all the frames when loading page
_new: Load this link into a brand new window. The window that this frame is located will still be left open and will remain unchanged.
_self: Load this link into my own frame
_parent: Load this link into my parent's frame. In many cases this behaves similar to _top, but there is a slight difference that is illustrated on our demos page

If you're lazy and don't want to put targets on every single link and there is a common target that you want to define for an entire page, you can put a <base target="sometarget"> tag into the head tag and all links without a defined target will use that as the default.